<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>史问-智能历史问答助手</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 自定义样式 */
        .hero-bg {
            background-image: url('https://picsum.photos/1600/900'); /* 替换为实际背景图地址 */
            background-size: cover;
            background-position: center;
        }
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #d97706;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }
        .nav-link.active::after {
            width: 100%;
        }
        .mode-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 4px;
        }
    </style>
</head>
<body class="font-sans">
<!-- 导航栏 -->
<nav class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center">
            <span class="text-2xl font-bold text-red-600">史问</span>
            <span class="ml-2 text-gray-600">智能历史问答助手</span>
        </div>
        <div class="hidden md:flex space-x-8">
            <a href="#" class="nav-link active text-red-600 font-medium">首页</a>
            <a href="#" class="nav-link text-gray-600 hover:text-red-600 transition-colors">知识库</a>
            <a href="#" class="nav-link text-gray-600 hover:text-red-600 transition-colors">历史记录</a>
            <a href="#" class="nav-link text-gray-600 hover:text-red-600 transition-colors">关于我们</a>
        </div>
        <div class="flex items-center space-x-3">
            <button class="hidden md:block px-4 py-2 border border-red-600 text-red-600 rounded hover:bg-red-50 transition-colors">登录</button>
            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors">注册</button>
            <button class="ml-2 text-gray-600 hover:text-red-600 hidden md:block">AI生成</button>
        </div>
        <button class="md:hidden text-gray-600">
            <i class="fas fa-bars text-xl"></i>
        </button>
    </div>
</nav>

<!-- 主要内容 -->
<main class="hero-bg py-16 md:py-24">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">探索历史，智能问答</h1>
            <p class="text-lg text-gray-700 mb-8">基于LLM与大数据，为你解答历史疑问，从古代文明到近现代事件，全方位满足你的历史探索需求</p>
            <div class="flex flex-col md:flex-row items-center justify-center mb-6">
                <input type="text" placeholder="请输入历史问题，如'秦始皇统一六国的时间'" class="w-full md:w-3/4 px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent">
                <button class="mt-3 md:mt-0 px-6 py-3 bg-red-600 text-white rounded-r-lg hover:bg-red-700 transition-colors">
                    提问 <i class="fas fa-paper-plane ml-2"></i>
                </button>
            </div>
            <div class="flex justify-center space-x-4 mb-8">
                    <span class="flex items-center">
                        <span class="mode-dot bg-red-600"></span>API模式
                    </span>
                <span class="flex items-center">
                        <span class="mode-dot bg-gray-300"></span>知识图谱模式
                    </span>
            </div>
            <div class="flex flex-wrap justify-center gap-3">
                <span class="text-gray-600">热门问题：</span>
                <button class="px-3 py-1 bg-white rounded-full text-gray-700 hover:bg-gray-100 transition-colors">郑和下西洋的目的</button>
                <button class="px-3 py-1 bg-white rounded-full text-gray-700 hover:bg-gray-100 transition-colors">工业革命的影响</button>
                <button class="px-3 py-1 bg-white rounded-full text-gray-700 hover:bg-gray-100 transition-colors">唐朝三省六部制</button>
                <button class="px-3 py-1 bg-white rounded-full text-gray-700 hover:bg-gray-100 transition-colors">辛亥革命的意义</button>
            </div>
        </div>
    </div>
</main>

<script>
    // 这里可以添加一些交互逻辑，比如移动端菜单展开等
    // 示例：移动端菜单点击事件（简单演示，实际可根据需求完善）
    const mobileMenuBtn = document.querySelector('.md\\:hidden');
    if (mobileMenuBtn) {
        mobileMenuBtn.addEventListener('click', function() {
            alert('移动端菜单点击，可在这里实现菜单展开逻辑');
        });
    }
</script>
</body>
</html>